<template>
  <div>
    <div :class="{'active' : isActive, 'text-danger': hasError}" :style="[{color:'red'}, {background: '#ddd'}]">样式</div>
    <div :style="{'color':'red', 'background-color': '#eee'}">style样式</div>
    <div v-bind:class="classObject">选项数据</div>

    <button v-on:click="eventHandler">点击</button>
    <button @click="num = num + 1">增加1</button>
    <div>----------绑定事件-----------</div>
    <button @click="Say('hi', 123)">弹框</button>
    <div :class="['active', 'text-danger']">------------------</div>
    <div>{{msg}}</div>
    <div>computed:{{aDouble}}</div>
    <div @click="say('hi', 9, true)">点击</div>
    <p>模板语法</p>
    <div :class="msg">{{num + 3}}</div>
    <p>条件渲染</p>
    <div v-if="seen">现在可以看到我</div>
    <div v-else>我是else的内容</div>
    <h3>列表循环</h3>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{index+1}}-{{todo.text}}
      </li>
    </ul>
    <ol>
      <li v-for="(value, key) in obj" :key="key">{{key}}-{{value}}</li>
    </ol>
    <!--  -->
    <h3>v-model</h3>
    <p>{{message}}</p>
    <input v-model="message" />
    <h3>v-once执行一次性的插值，当数据改变时，插值处内容不会更新</h3>
    <span v-once>{{message}}</span>

  </div>
</template>
<script>
export default {
  data(){
    return {
      msg: 'helloworld',
      num: 10,
      seen: false,
      todos:[
        {text: '学习JavaScript'},
        {text: '学习Vue'},
        {text: '学习React'}
      ],
      obj: {
        name: '张三',
        age: '24',
        job: '程序员',
        xingge: '阳光，正能量，乐观'
      },
      message: 'hello vue',
      isActive: true,
      hasError: true,
      classObject: {
        'active': true,
        'text-danger': true
      }
    }
  },
  created(){
    console.log(this.$el)
  },
  mounted(){
    console.log(this.$route.params.id)
  },
  computed:{
    aDouble(){
      return this.num * 2
    },
    
  },
  methods: {
    Say(e){
      console.log(e)
    },
    eventHandler(){
      this.num++
    },
    say(h){
      console.log(Array.prototype.slice.call(arguments))
    }
  }
}
</script>